<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>远程附件</span>
                </div>
            </div>
            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="180px" class="demo-ruleForm">
                <div class="ba_f">
                    <div class="main-enclosure pad_tb_30">
                        <div class="t_l tsradio" style="margin-left: 100px;">
                            <el-radio-group v-model="type">
                                <el-radio
                                        v-for="item in radioOptions"
                                        :key="item.value"
                                        :value="item.value"
                                        :label="item.value"
                                        border
                                        size="medium"
                                        @change="handleRadioChange"
                                >{{item.label}}
                                </el-radio>
                            </el-radio-group>
                        </div>
                        <div class="qny" v-show="type=='1'">
                            <div class="yb_margin pad_20 fon_12 color_38 ba_fe t_l">
                                启用七牛云存储后，之前文件图片及文件子目录需重新上传至七牛云存储，</br>相关网址:<a href="https://portal.qiniu.com/kodo/overview" target="_black">https://portal.qiniu.com/kodo/overview</a>
                            </div>
                            <el-form-item label="Accesskey"  :required="true">
                                <el-input v-model="ruleForm.qn_accesskey" autocomplete="off"
                                          placeholder="请输入Accesskey"></el-input>
                                <div class="remarks fon_12">用于签名的公钥</div>
                            </el-form-item>
                            <el-form-item label="Secretkey"  :required="true">
                                <el-input v-model="ruleForm.qn_secretkey" autocomplete="off"
                                          placeholder="请输入Secretkey"></el-input>
                                <div class="remarks fon_12">用于签名的私钥</div>
                            </el-form-item>
                            <el-form-item label="Bucket" :required="true">
                                <el-input v-model="ruleForm.qn_bucket"
                                          placeholder="请输入Bucket"></el-input>
                                <div class="remarks fon_12">请保证bucket为可公共读取的</div>
                            </el-form-item>
                            <el-form-item label="Bucket所在区域" :required="true">
                                <el-select v-model="ruleForm.qn_endpoint" filterable placeholder="请选择所在区域"
                                           class="select">
                                    <el-option v-for="item in optionst1" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="Url" :required="true">
                                <el-input v-model="ruleForm.qn_url" placeholder="请输入Url"></el-input>
                                <div class="remarks fon_12">请输入自定义云存储域名，注：url开头一定是https://，结尾不加 ‘/’，例如格式为https://www.abc.com。
                                </div>
                            </el-form-item>
                        </div>
                        <div class="aly" v-show="type=='2'">
                            <div class="tishi pad_20 fon_12 color_38 ba_fe t_l">
                                <p class="yb_margin">
                                    启用阿里云oss存储后，之前文件图片及文件子目录需重新上传至oss存储, 相关网址：<br/>
                                    网址:<a href="https://www.aliyun.com/product/oss?spm=5176.12825654.h2v3icoap.40.58502c4aaht7fK" target="_blank">https://www.aliyun.com/product/oss?spm=5176.12825654.h2v3icoap.40.58502c4aaht7fK</a>
                                </p>
                            </div>
                            <el-form-item label="Access Key ID" :required="true">
                                <el-input v-model="ruleForm.aliyuncs_accesskey" autocomplete="off"
                                          placeholder="请输入Access Key ID"></el-input>
                                <div class="remarks fon_12">Access Key ID是您访问阿里云API的密钥，具有该账户完全的权限，请您妥善保管。
                                </div>
                            </el-form-item>
                            <el-form-item label="Access Key Secret" :required="true">
                                <el-input v-model="ruleForm.aliyuncs_secret" autocomplete="off"
                                          placeholder="请输入Access Key Secret"></el-input>
                                <div class="remarks fon_12">Access Key
                                    Secret是您访问阿里云API的密钥，具有该账户完全的权限，请您妥善保管。(填写完Access Key ID 和 Access Key
                                    Secret 后请选择bucket)
                                </div>
                            </el-form-item>

                            <el-form-item label="Endpoint选择" :required="true">
                                <el-select v-model="ruleForm.aliyuncs_endpoint" filterable placeholder="Endpoint选择"
                                           class="select" @change="ChangeEndpoint(ruleForm.aliyuncs_endpoint)">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <div class="remarks fon_12">完善Access Key ID和Access Key
                                    Secret资料后可以选择存在的Bucket(请保证bucket为可公共读取的)，否则请手动输入。
                                </div>
                            </el-form-item>
                            <el-form-item label="Bucket选择" :required="true">
                                <el-select v-model="ruleForm.aliyuncs_bucket" filterable placeholder="bucket选择"
                                           class="select">
                                    <el-option v-for="item in bucoptions" :key="item.label" :label="item.label"
                                               :value="item.label"></el-option>
                                </el-select>

                                <div class="remarks fon_12">完善Access Key ID和Access Key
                                    Secret资料后可以选择存在的Bucket(请保证bucket为可公共读取的)，否则请手动输入。
                                </div>
                            </el-form-item>
                            <el-form-item label="自定义URL" :required="true">
                                <el-input v-model="ruleForm.aliyuncs_url" placeholder="请输入自定义URL"></el-input>
                                <div class="remarks fon_12">
                                    请输入自定义云存储域名，注：url开头一定是https://，结尾不加 ‘/’，例如格式为https://www.abc.com。
                                </div>
                            </el-form-item>
                        </div>
                        <div class="txy" v-show="type=='3'">
                            <div class="yb_margin pad_20 fon_12 color_38 ba_fe t_l">
                                启用腾讯云cos存储后，之前文件图片及文件子目录需重新上传至腾讯云cos存储,<br> 相关网址：<a href="https://cloud.tencent.com/product/cos" target="_blank">https://cloud.tencent.com/product/cos</a>
                            </div>
                            <el-form-item label="APPID" :required="true">
                                <el-input v-model="ruleForm.xplqcloud_appid" autocomplete="off"
                                          placeholder="请输入Accesskey"></el-input>
                                <div class="remarks fon_12">APPID 是您项目的唯一ID</div>
                            </el-form-item>
                            <el-form-item label="SecretID" :required="true">
                                <el-input v-model="ruleForm.xplqcloud_secretid" autocomplete="off"
                                          placeholder="请输入Secretkey"></el-input>
                                <div class="remarks fon_12">SecretID 是您项目的安全密钥，具有该账户完全的权限，请妥善保管</div>
                            </el-form-item>
                            <el-form-item label="SecretKEY" :required="true">
                                <el-input v-model="ruleForm.xplqcloud_secretkey"
                                          placeholder="请输入Bucket"></el-input>
                                <div class="remarks fon_12">SecretKEY 是您项目的安全密钥，具有该账户完全的权限，请妥善保管</div>
                            </el-form-item>
                            <el-form-item label="Bucket" :required="true">
                                <el-input v-model="ruleForm.xplqcloud_bucket"
                                          placeholder="请输入Url"></el-input>
                                <div class="remarks fon_12">请保证bucket为可公共读取的</div>
                            </el-form-item>
                            <el-form-item label="Bucket所在区域" :required="true">
                                <el-select v-model="ruleForm.xplqcloud_endpoint" filterable placeholder="请选择所在区域"
                                           class="select">
                                    <el-option v-for="item in optionst" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <!--                                            <el-input v-model="ruleForm.bucketszqy"-->
                                <!--                                                      placeholder="请输入所在区域"></el-input>-->
                                <div class="remarks fon_12">选择bucket对应的区域，如果没有选择无</div>
                            </el-form-item>
                            <el-form-item label="URL" :required="true">
                                <el-input v-model="ruleForm.xplqcloud_url" placeholder="请输入Url"></el-input>
                                <div class="remarks fon_12">请输入自定义云存储域名，注：url开头一定是https://，结尾不加 ‘/’，例如格式为https://www.abc.com。
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {getConfig,postConfig,getBucket} from "@/api/setup";

    export default {
        components: {},
        created() {
            this.bus.$emit('loading', true);
            this.init();
        },
        data() {
            return {
                cardLoading: true,
                ruleForm: {
                    id:'',
                    qn_accesskey: '',
                    qn_secretkey: '',
                    qn_bucket: '',
                    qn_endpoint: '',
                    qn_url: '',

                    aliyuncs_accesskey: '',
                    aliyuncs_secret: '',
                    aliyuncs_endpoint:'',
                    aliyuncs_bucket: '',
                    aliyuncs_customurl: '',

                    xplqcloud_appid: '',
                    xplqcloud_secretid: '',
                    xplqcloud_secretkey: '',
                    xplqcloud_bucket: '',
                    xplqcloud_endpoint: '',
                    xplqcloud_url: '',
                },
                bucoptions:[],
                radioOptions:[
                    {
                        value: '0',
                        label: '本地存储',
                    },
                    {
                        value: '1',
                        label: '七牛云存储',
                    },
                    {
                        value: '2',
                        label: '阿里云OSS',
                    },
                    {
                        value: '3',
                        label: '腾讯云存储',
                    }
                ],
                type: '0',
                optionst1:[
                    {
                        value: 'east_china',
                        label: '华东',
                    },
                    {
                        value: 'north_china',
                        label: '华北',
                    },
                    {
                        value: 'south_china',
                        label: '华南',
                    },
                    {
                        value: 'north_america',
                        label: '北美',
                    },
                ],
                options:[
                    {
                        value: 'oss-cn-hangzhou.aliyuncs.com',
                        label: '华东1（杭州）',
                    },
                    {
                        value: 'oss-cn-shanghai.aliyuncs.com',
                        label: '华东2（上海）',
                    },
                    {
                        value: 'oss-cn-qingdao.aliyuncs.com',
                        label: '华北1（青岛）',
                    },
                    {
                        value: 'oss-cn-beijing.aliyuncs.com',
                        label: '华北2（北京）',
                    },
                    {
                        value: 'oss-cn-zhangjiakou.aliyuncs.com',
                        label: '华北3（张家口）',
                    },{
                        value: 'oss-cn-huhehaote.aliyuncs.com',
                        label: '华北5（呼和浩特）',
                    },{
                        value: 'oss-cn-shenzhen.aliyuncs.com',
                        label: '华南1（深圳）',
                    },
                    {
                        value: 'oss-cn-heyuan.aliyuncs.com',
                        label: '华南2（河源）',
                    },
                    {
                        value: 'oss-cn-guangzhou.aliyuncs.com',
                        label: '华南3（广州）',
                    },{
                        value: 'oss-cn-hongkong.aliyuncs.com',
                        label: '中国香港',
                    },
                    {
                        value: 'oss-cn-chengdu.aliyuncs.com',
                        label: '西南1（成都）',
                    }
                ],
                optionst:[
                    {
                        value: 'bj',
                        label: '北京',
                    },
                    {
                        value: 'nj',
                        label: '南京',
                    },
                    {
                        value: 'sh',
                        label: '上海',
                    },
                    {
                        value: 'gz',
                        label: '广州',
                    },
                    {
                        value: 'cd',
                        label: '成都',
                    },{
                        value: 'cq',
                        label: '重庆',
                    },{
                        value: 'hk',
                        label: '中国香港',
                    },
                ],
                formInline:{
                    apply_image:'',
                    apply_name:'',
                    app_type_name:'',
                },
            };
        },
        methods: {
            async init() {
                const {data} = await getConfig({ident:'storage'});
                this.ruleForm = Object.assign({}, data);
                this.type = data.type?data.type:'0'
                this.bus.$emit('loading', false)
            },
            async handleRadioChange(){

             },
            async ChangeEndpoint(item) {
                var data ={}
                data = {
                    aliyuncs_accesskey:this.ruleForm.aliyuncs_accesskey,//公钥
                    aliyuncs_secret:this.ruleForm.aliyuncs_secret,//私钥
                    endpoint:item,
                }
                const res = await getBucket(data);
                console.log(res)
                if (res.code == 1) {
                    console.log(res.data)
                    this.bucoptions=res.data;
                }
            },
           async submitForm() {
                    this.ruleForm.ident = 'storage'
                    this.ruleForm.identName = '远程附件'
                    this.ruleForm.type = this.type
                    const {msg} = await postConfig(this.ruleForm);
                    this.$baseMessage(msg, "success");
                    this.init();
            },
        }
    }
</script>
<style lang="scss">
    .tsradio{
        .el-radio__inner:after {
            top: 6px;
            left: 6px;
        }
    }
</style>
